<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/index.css"/>
    <title>我的关注</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/common.js"></script>
    <script src="${pageContext.request.contextPath}/js/vue.js"></script>

</head>
<body>
<jsp:include page="common/header.jsp"/>

<article>
    <c:set value="${requestScope.userInfo}" var="info"></c:set>
    <div id="main">
        <section class="aside">
            <!-- 定义右侧窗口信息 -->
<%--            <aside class="users">--%>
                <jsp:include page="common/asideUser.jsp" />
<%--                <div>--%>
<%--                    <p><a href="javascript:void(0);">点击登录</a></p>--%>
<%--                    <p><a href="javascript:void(0);">登录账号可享受大众会员特权</a></p>--%>
<%--                </div>--%>

<%--                <p>--%>
<%--                    <span class="lf"></span>开通VIP尊享特权<span class="rf"></span>--%>
<%--                </p>--%>

<%--                <div class="clearfix">--%>
<%--                    <p class="download">下载权益</p>--%>
<%--                    <p class="book">图书权益</p>--%>
<%--                    <p class="vip">VIP文章</p>--%>
<%--                    <p class="col">收藏特权</p>--%>
<%--                </div>--%>
<%--            </aside>--%>

            <aside class="psl">
                <a class="focus-on" href="javascript:void(0)" v-if="totalRows!=null">关注数:<b>{{totalRows}}</b></a>
                <a class="focus-on" href="javascript:void(0)" v-else>关注数:<b>0</b></a>
                <a class="fan" v-if="fenSiNum2!=null">粉丝数:<b>{{fenSiNum2}}</b></a>
                <a class="fan" v-else>粉丝数:<b>0</b></a>
            </aside>
        </section>
        <section>

            <h1 class="attent-title">人员关注信息</h1>

            <div class="bg-hr"></div>

            <div class="attent-list">
                <!-- 一个关注  -->

                <div class="attent" v-for="ss in attentionList" v-show="ss.status==1">
                    <img :src="'${pageContext.request.contextPath}/photo?p='+ ss.photo"/>
                    <a class="lr" @click="changeStatus($event, ss.uid)" >已关注</a>
<%--                    <a class="qx" @click="changeStatus" >关注</a>--%>
                    <a class="rf" :href="'${pageContext.request.contextPath}/user/more?u='+ ss.uid ">查看他的资源</a>
                    <span class="user-a">{{ss.nick_name}}</span>
                </div>
            </div>
            <!-- 清除浮动 -->
            <div class="clearfix"></div>
            <div class="pagination">
                <!--如果当前页 > 1,则 显示上一页 -->
                <a class="left" v-if="page > 1" @click="page = page -1"></a>
                <template v-if="total <= 5">
                    <a v-for="p in total" :class="{act:p == page}" @click="page = p">{{p}}</a>
                </template>
                <template v-else-if="page <= 3">
                    <a v-for="p in 5" :class="{act:p==page}" @click="page=p">{{p}}</a>
                </template>
                <template v-else-if="page >= total - 2">
                    <a v-for="p in 5" :class="{act: total - 5 + p == page}" @click="page=total-5+p">{{total-5+p}}</a>
                </template>
                <template v-else>
                    <a v-for="p in 5" :class="{act:page-3+p==page}" @click="page=page-3+p">{{page-3+p}}</a>
                </template>
                <a class="right" v-if="page != total" @click="page=page+1"></a>
                <select v-model="page">
                    <option v-for="p in total" :value="p">{{p}}/{{total}}</option>
                </select>
            </div>
        </section>
    </div>
</article>
<jsp:include page="common/footer.jsp"/>
<script>
    new Vue({
        el:"#main",
        data:{
            attentionList:[],
            fenSiNum:"",
            fenSiNum2:"",
            page:1,
            total:0,
            totalRows:""

        },
        created(){ //vue实例创建成功后

            // 调用异步请求获取关注信息
            this.getfocus();
            this.fensi2();

        },
        methods:{
            changeStatus(event, uId){
                if (event.target.className == "qx"){
                    event.target.className = "lr";
                    event.target.text = "已关注";
                    this.totalRows +=1;
                    fetch("${pageContext.request.contextPath}/addAttention?uid="+ uId).then(ret =>{
                        if (ret.status){
                        }
                    })
                } else if (event.target.className == "lr"){
                    event.target.className = "qx";
                    event.target.text = "关注";
                    this.totalRows -=1;
                    fetch("${pageContext.request.contextPath}/updateStatus?uid="+ uId ).then(ret =>{
                        if (ret.status){
                        }
                    })
                }
            },
            getfocus(){
                fetch("${pageContext.request.contextPath}/detail/attention").then(ret =>{
                    if (ret.status){
                        this.attentionList = ret.data.list;
                        this.total = ret.data.total;
                        this.totalRows = ret.data.totalRows;
                    }
                })
            },
            fensi2(){
                fetch("${pageContext.request.contextPath}/fenNum2").then(ret => {
                    if (ret.status) {
                        this.fenSiNum2 = ret.data[0].s;
                    }
                })
            },
        },
            watch:{
                page: function(newPage,oldPage){
                    // 获取 新页码 对应的 数据
                    fetch("${pageContext.request.contextPath}/detail/attention?page=" + newPage).then(ret =>{
                        if (ret.status){
                            this.attentionList = ret.data.list;
                            this.total = ret.data.total;
                        }
                    })
                }
            },
    })
</script>
</body>
</html>